﻿<!DOCTYPE html>
<html>
	<head>
		<title>模板列表</title>
    
    <style type="text/css">
        body{
	margin:20px;
    background:#f5f5f5;
	font:12px/24px Verdana, Geneva, sans-serif;
}
ul,li,p{
	margin:0;
	padding:0;
	list-style:none;
}
a{
	text-decoration:none;
	color:#666;
}


/*模板列表样式*/
.Template_title{
	background:none;
	border-bottom:1px solid #e2e2e2;
	line-height:33px;
	height:33px;
}
.Template_title span{
	font:bold 14px/30px "宋体";
	color:#666;
	padding-left: 7px;
}

.Edit_t{
	margin:20px 0;
	background-color:#ededed;
	padding:10px 0;
	height:210px;
	clear:both;  border: 1px solid #aaa;
}
.Edit_t .l{
	float:left;
	width:250px;
	border-right:1px dotted #c2c2c2;
}
.Edit_t .l p{
	margin:3px 0;
	text-align:center;
	color:#808080;
}
.Edit_t .l p img{
	border:5px solid #c2c2c2;
}
.Edit_t .l p a.t,.List_t ul li p a.t{
	color:#808080;
	font-weight:bold;
}
.Edit_t .l p a.t:hover,.List_t ul li p a.t:hover{
	color:#cb221a;
}
.Edit_t .l p a.btn,.List_t ul li p a.btn{
	background:#0066cc;
    display: inline-block;
    height: 20px;
	line-height:18px;
	line-height:21px\9;
	*line-height:21px;
	text-align:center;
	color:#fff;
    width: 40px;
	*zoom:1;
}
.Edit_t .l p a.btn:hover,.List_t ul li p a.btn:hover{
	text-decoration:underline;
}

.Edit_t .r{
	float:left;
	margin-left:50px;
}
.Edit_t .r h1{
	font-size:14px;
	color:#666;
	margin:3px 0;
}

.Edit_t .r p{
	color:#8c8c8c;
	margin:7px 0;
}
.Edit_t .r p img{
	margin:25px 0 10px;
}

.Edit_t .r p a.btn{
	display:inline-block;
	color:#ff6600;
	font:bold 14px/30px "宋体";
	line-height:30px;
	text-align:center;
	*display:inline;
	*zoom:1;
	background:#ffffcc;
	border:solid 1px #ff6600;
	width:128px;
	height:30px;
	margin-left:50px;
}
.Edit_t .r p.btns{
	margin-left:15px;
	margin-top:30px;
}


.List_t{
	margin:20px 0;
}
.List_t ul{
	clear:both;
	margin-bottom:20px;
	margin-left: 25px;
}
.List_t ul li{
	width:120px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	padding:0 40px;
	height:280px;
	text-align:center;
}
.List_t ul li p img,span.thumbnail
{
    width:100px;
    height:120px;
	margin:4px;
	border:1px solid #c2c2c2;
}
span.thumbnail{display:block;padding-top:40px;height:80px;margin:0 auto;}
p.thumbnail img{width:100px;height:120px;}
p.thumbnail{text-align:center;}
.List_t ul li p img:hover,span.thumbnail:hover{
	margin:0;
	border:5px solid #c2c2c2;
}

p.thumbnail span.thumbnail:hover{margin:0 auto;border:1px solid #c2c2c2;}
.Page_t{
	text-align:right;
	margin:10px;
}
.Page_t a.btn{
	background:red;
	line-height:16px;
	height:18px;
	text-align:center;
	color:#fff;
	width:30px;
	display:inline-block;
	*display:inline;
	*zoom:1;
}

/*清除浮动*/
.wrapfix:after {content: "."; display: block;height: 0; clear: both;visibility: hidden;}
.wrapfix {display: inline-table;}
* html .wrapfix {height: 1%;}
.wrapfix {display: block;}


.uploadform{position:relative;}
.tplfileC{position:absolute;top:0px;left:198px;width:72px;height:30px;overflow:hidden;}
.tplfile{opacity:0;filter:alpha(opacity=0);overflow:hidden;height:30px;cursor:pointer;margin-left:-133px;width:200px;}
.hidden{display:none;}

    </style>
	</head>
<body>

<div class="Template_title"><span>模板设置</span></div>
	
	<div class="Edit_t">
		<div class="l">
			<p>当前使用模板</p>
			<p class="thumbnail">${currentThumbnail}</p>
			<p><a href="javascript:;" class="t">${currentName}</a></p>
			<p><a class="btn edit" href="tpl:${current}">编辑</a>&nbsp;<a class="btn down" href="tpl:${current}">下载</a></p>
		</div>
		<div class="r">
			<h1>自定义模板</h1>
			<p>想要打造一个专属于自己的个性模板吗？立刻动手DIY一个独一无二的绚丽模板吧!</p>
			<!--<p><img src="/Content/themes/Admin/Default/template/flow_img.jpg" /></p>-->
            <iframe name="upload_frame" id="upload_frame" style="display:none"></iframe>
            <form target="upload_frame" method="post" enctype="multipart/form-data" action="?" class="uploadform" id="zipform">
                <input type="hidden" name="module" value="template" />
                <input type="hidden" name="action" value="extractZip" />
                <p class="btns"><a href="http://www.ops.cc/cms/template_demo.html" target="_blank" class="btn" style="margin-left:0;">下载示例包</a><a href="javascript:;" class="btn upload" style="width:70px">上传模板</a></p>
                <div class="tplfileC"><input type="file" class="tplfile" id="tplfile" name="tplfile"/></div>
            </form>
            <br />
            <p><b>网络安装:</b><input type="text" value="请输入模板安装包地址..." onfocus="if (this.value == '请输入模板安装包地址...') this.value = ''" onblur="    if (this.value == '') this.value = '请输入模板安装包地址...'" style="width:400px"/><a class="btn install" href="javascript:;" style="width:40px;height:22px;line-height:22px;">安装</a></p>
		</div>
	</div>
	<div class="Template_title"><span>模板列表</span></div>
	<div class="List_t">
		<ul>
            <!--  
			<li>
				<p><a href="javascript:;"><img src="/Templet/@tpl/ScreenShot.jpg" alt="点击切换模板" class="shot @tpl"/></a></p>
				<p><a href="" class="t">@tpl</a></p>
				<p><a class="btn edit" href="tpl:@tpl">编辑模板</a><a class="btn down" href="tpl:${tpl}">下载</a></p>
			</li>
            -->

            ${list}

		</ul>

        <!--
		<div class="Page_t">
			<a class="btn" href="">上一页</a>
			<a class="btn" href="">下一页</a>
		</div>
        -->

	</div>
	
	$js()
   <script type="text/javascript">
       var file = cms.$('tplfile');
       var _file = '';

       function reset() {
           file.value = '';
           _file = '';
       }

       reset();

       cms.each(document.getElementsByClassName('edit'), function (i, e) {
           e.href = 'javascript:cms.tab.open(\'编辑模板\',\'?module=template&action=edit&tpl=' + e.toString().split(':')[1]+'\')';
       });

       //下载模板
       cms.each(document.getElementsByClassName('down'), function (i, e) {
           e.href = '?module=template&action=DownloadZip&tpl=' + e.toString().split(':')[1];
       });

       cms.each(document.getElementsByClassName('shot'), function (i, e) {
           return false;
           e.onclick = function () {
               if (confirm('确定切换模板吗?')) {
                   var tpl = e.className.split(' ')[1];
                   cms.xhr.jsonPost('?', 'module=template&action=templateAsDefault&tpl=' + encodeURIComponent(tpl), function (json) {
                       if (json.result) {
                           parent.M.alert('切换成功!');
                           location.reload();
                       }
                   });
               }
           }
       });

       cms.each(document.getElementsByClassName('upload'), function (i, e) {
           e.onclick = function () {
               file.onclick();
           };
       });

       cms.each(document.getElementsByClassName('install'), function (i, e) {
           e.onclick = function () {
               var url = this.previousSibling.value;
               if (!/\.zip$/.test(url)) {
                   alert('不是有效的模板压缩包(*.zip)文件');
               } else {
                   cms.xhr.jsonPost('?', 'module=template&action=netinstall&url=' + encodeURIComponent(url), function (json) {
                       if (json.result) {
                           parent.M.alert('安装完成!');
                           location.replace(location.href);
                       } else {
                           alert('安装出现问题,请重试');
                       }
                   });
               }
           };
       });

       function uploadTip(msg) {
           parent.M.alert( msg);
           if (msg.indexOf('成功') != -1) {
               location.replace(location.href);
           }
       }


       setInterval(function () {
           if (_file != file.value) {
               _file = file.value;
               if (/\.zip$/.test(_file)) {
                   document.forms[0].submit();
               } else {
                   alert('不是有效的模板压缩包(*.zip)文件');
               }
           }
       }, 50);

   </script>
</body>
</html>